import React,{useState} from "react";

import {Swiper,SwiperSlide} from 'swiper/react'
import SwiperCore,{Pagination,Autoplay} from 'swiper';
import axios from "axios";

interface Ibanner{
    _id:string,
    picture:string
}
export default function Banner(){

    let [banner,setBanner] = useState<Ibanner[]>()

    SwiperCore.use([Pagination,Autoplay]);

    async function initialization(swiper:SwiperCore){
        const result = await axios.get('/api/getBanner')
        setBanner(result.data)
        swiper.update()
    }
    
    return (
        <Swiper
            //swiper 的第一个 div 是 pagination 元素 通过 swiper 控制 pagination
            //如果想要自己设置跳转到的 pagination 的颜色 就给他设置 bulletActiveClass 的类名 表示到它时它的类名
            pagination={{clickable:true}}
            spaceBetween={50}//slide 的间距
            slidesPerView={1}//同屏显示多少个 swiper 滑块
            initialSlide={1}//从哪一个页面开始显示 最小为1
            loop={true}//是否开启无限轮播
            autoplay={{
                //两秒播放一次
                delay:2000,
                //鼠标点击或者移动到其他图片时是否停止定时器
                disableOnInteraction:false
            }}
            //onSlideChange={() => console.log('slide change')}//切换 slide 时调用
            //NOTE:目前由于 无法给 observer observeParents observeSlideChildren 布尔值(估计是react识别问题)
            //导致 swiper 内数据更改时无法初始化
            //但是 swiper 实例中有 update方法可以手动初始化
            //onSwiper 会在 swiper 首次初始化时调用，同时可以获得 swiper 实例
            //在这个回调里请求图片 保存到 banner 中 然后再调用 swiper.update()
            //就可完成手动初始化
            onSwiper={(swiper)=>initialization(swiper)}
            
        >
      {
            banner?.map(item=>{
                return (
                    <SwiperSlide key={item._id}>
                        <img src={item.picture} alt="" style={{width:'100%',height:'50%'}}/>
                    </SwiperSlide>
                )
            })
      }
    </Swiper>
    )
}
